<template>
  <el-card>
    <el-form :inline="true" :model="searchForm" ref="searchFormRef">
      <el-form-item label="名称" prop="filter">
        <el-input v-model="searchForm.filter" placeholder="名称" :clearable="true" maxlength="256" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="Search" @click="onSearch">查询</el-button>
        <el-button icon="RefreshRight" @click="onReset(searchFormRef)">重置</el-button>
      </el-form-item>
    </el-form>
    <el-button type="primary" icon="Plus" @click="isAddDialogVisible = true">新增</el-button>
    <el-table :data="agentData" :border="true" :stripe="true" class="table-data" >
      <el-table-column type="index" label="序号" width="180" />
      <el-table-column prop="code" label="代理名称" />
      <el-table-column prop="displayName" label="上级代理" />
      <el-table-column prop="displayName" label="渠道商" />
      <el-table-column prop="displayName" label="渠道代理号" />
      <el-table-column prop="displayName" label="创建人" />
      <el-table-column prop="displayName" label="创建时间" />
      <el-table-column prop="displayName" label="状态" />
      <el-table-column prop="displayName" label="备注" />
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="primary" @click="onUpdate(scope.row.id)" size="small" icon="Edit" title="修改"
            style="margin-left: 12px">修改</el-button>
          <el-popconfirm :title="`你确定删除${scope.row.displayName}?`" @confirm="onRemove(scope.row.id)" width="200px">
            <template #reference>
              <el-button type="danger" size="small" icon="Delete" title="删除">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination v-model:current-page="pageNo" v-model:page-size="pageSize" :page-sizes="[10, 15, 20, 50]"
      :background="true" layout="prev, pager, next, jumper,->,sizes,total" :total="total"
      @current-change="getAgentListAsync" @size-change="onSizeChange" />
  </el-card>

  <Show :visible="isAddDialogVisible">
    <AgentAdd
      v-model="isAddDialogVisible"
      @update:refresh="onRefresh"
      title="添加代理商"
      max-height="500px"
    ></AgentAdd>
  </Show>
  <Show :visible="isUpdateDialogVisible">
    <AgentUpdate
      v-model="isUpdateDialogVisible"
      @update:refresh="onRefresh"
      @custom:event="onDetail"
      title="修改代理商"
      :id="updateId"
      max-height="500px"
    ></AgentUpdate>
  </Show>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue';

import type { FormInstance } from 'element-plus';

import { AgentAdd } from './add/index';
import { AgentUpdate } from './update/index';
import { Show } from '@/components/show/index';
import type { AgentCreateDto, AgentInput } from '@/utils/api/agent/type';

// 默认页大小
const defaultPageSize: number = 10;
// 查询组件实例
const searchFormRef = ref<FormInstance>();
// 查询条件
const searchForm = ref<AgentInput>({
  skipCount: 0,
  maxResultCount: defaultPageSize
});
// 列表数据
const agentData = ref<AgentCreateDto[]>([]);
// 分页器默认页码
const pageNo = ref<number>(1);
// 每一页展示几条数据
const pageSize = ref<number>(defaultPageSize);
// 存储已有总个数
const total = ref<number>(0);

// 是否显示add dialogVisible
const isAddDialogVisible = ref(false);
// 是否显示updte dialogVisible
const isUpdateDialogVisible = ref(false);
const updateId = ref<string>();
// 是否显示detail dialogVisible
const isDetailDialogVisible = ref(false);
const detailId = ref<string>();

// 详情
const onDetail = (id: string) => {
  isDetailDialogVisible.value = true;
  detailId.value = id;
};

// 修改
const onUpdate = (id: string) => {
  isUpdateDialogVisible.value = true;
  updateId.value = id;
};

// 删除
const onRemove = async (id: string) => {
  //await deleteAsync(id);
  // 删除成功刷新页面
  await onRefresh();
};

// 查询
const onSearch = async () => {
  await getAgentListAsync();
};

// 刷新
const onRefresh = async () => {
  await getAgentListAsync();
};

//分页器下拉菜单发生变化触发
const onSizeChange = async (pageSizes: number) => {
  pageSize.value = pageSizes;
  await getAgentListAsync();
};

// 重置
const onReset = (formEl: FormInstance | undefined) => {
  if (!formEl) {
    return;
  }
  formEl.resetFields();
};

//组件挂载完毕
onMounted(async () => {
  await getAgentListAsync();
});

// 查询列表
const getAgentListAsync = async (pager = 1) => {
  pageNo.value = pager;
  searchForm.value.maxResultCount = pageSize.value;
  searchForm.value.skipCount = (pageNo.value - 1) * pageSize.value;
  // const result: PagedResultDto<OrganizationTreeDto> = await getListAsync(searchForm.value);
  // total.value = result.totalCount;
  // organizationData.value = result.items;
};
</script>
<style scoped lang="scss">
.table-data {
  width: 100%;
  margin: 20px 0;
}
</style>